<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    size="default"
    status-icon
  >
    <el-form-item label="商品分类" prop="productCategoryName">
      <el-cascader
        v-model="ruleForm.productCategoryId"
        :options="options"
        @change="handleCascaderchange"
      />
    </el-form-item>
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="富标题" prop="subTitle">
      <el-input v-model="ruleForm.subTitle" />
    </el-form-item>
    <el-form-item label="商品品牌" prop="brandName">
      <el-select v-model="ruleForm.brandName" placeholder="Activity zone">
        <el-option
          v-for="item in optionsvalue"
          :label="item.label"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
    </el-form-item>
    <!-- 下面开始不用校验 -->
    <el-form-item label="商品介绍" prop="desc" row="2">
      <el-input v-model="ruleForm.description" type="textarea" />
    </el-form-item>
    <!-- 下面7条 -->
    <el-form-item label="商品货号">
      <el-input v-model="ruleForm.productSn" />
    </el-form-item>
    <el-form-item label="商品售价">
      <el-input v-model="ruleForm.price" />
    </el-form-item>
    <el-form-item label="市场价">
      <el-input v-model="ruleForm.originalPrice" />
    </el-form-item>
    <el-form-item label="商品库存">
      <el-input v-model="ruleForm.stock" />
    </el-form-item>
    <el-form-item label="计量单位">
      <el-input v-model="ruleForm.unit" />
    </el-form-item>
    <el-form-item label="商品重量" style="display: flex">
      <div style="display: flex; align-items: center">
        <el-input v-model="ruleForm.weight" />
        <div style="margin-left: 10px">克</div>
      </div>
    </el-form-item>
    <el-form-item label="排序">
      <el-input v-model="ruleForm.sort" />
    </el-form-item>
    <el-button
      style="margin-left: 180px; margin-top: 5px"
      @click="chandnext"
      type="primary"
      >下一步，填写商品促销</el-button
    >
  </el-form>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import type { FormRules } from "element-plus";
import * as api from "@/request/http";
// 商品分类
const options = ref<IaddProduct[]>([]);
// 商品分类的id
let optionsvalue = ref<IChildList[]>([]);
// 表单TS
interface RuleForm {
  productCategoryName: string | undefined;
  productCategoryId: string;
  name: string;
  subTitle: string;
  brandName: string;
  description: string;
  //   货号
  productSn: string;
  price: number;
  originalPrice: number;
  stock: number;
  unit: string;
  //   重量
  weight: number;
  sort: number;
}
// 表单数据
const ruleForm = reactive<RuleForm>({
  productCategoryName: "",
  productCategoryId: "",
  name: "",
  subTitle: "",
  brandName: "0",
  description: "12",
  productSn: "",
  price: 0,
  originalPrice: 0,
  stock: 0,
  unit: "",
  weight: 0,
  sort: 0,
});
// 校验规则
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
  productCategoryId: [
    {
      required: true,
      message: "请选择商品类别",
      trigger: "blur",
    },
  ],
  subTitle: [
    {
      required: true,
      message: "请输入富文本",
      trigger: "blur",
    },
  ],
  brandName: [
    {
      required: true,
      message: "请选择商品品牌",
      trigger: "blur",
    },
  ],
});

// 页面加载的时候
onMounted(() => {
  // 获取商品分类
  api.addProduct.productAttribute().then((res) => {
    options.value = res.data.map((item) => {
      return {
        value: item.id,
        label: item.name,
        children: item.children.map((item) => {
          // 只有两条数据进来这里
          return {
            value: item.id,
            label: item.name,
          };
        }),
      };
    });
  });
  //   获取商品品牌
  api.addProduct.brandList().then((res) => {
    console.log(res.data.list);
    optionsvalue.value = res.data.list.map((item) => {
      return {
        value: item.id,
        label: item.name,
      };
    });
  });
});
// 下拉只有一层的时候不可以点击
const handleCascaderchange = (value: any) => {
  ruleForm.productCategoryId = value[value.length - 1];
  ruleForm.productCategoryName = options.value
    .find((item) => item.value === value[0])
    ?.children?.find((item) => item.value == value[1])?.label;
};
// 接收父组件传过来的方法
const emits = defineEmits<{
  (e: "bingnext", a: number): void;
  (e: "fromNext", a: object): void;
}>();
// 点击按钮,传数值
const chandnext = () => {
  emits("bingnext", 1);
  emits("fromNext", ruleForm);
};
// 点按钮，拿到我表单的数据
// const fromNext = () => {};
</script>

<style scoped></style>
